<template>
  <div class="biao3" ref="biao3"></div>
</template>
<script setup>
import { ref, onMounted, watch, computed,nextTick } from "vue";
import * as echarts from "echarts";
let biao3 = ref(null);
onMounted(() => {
  nextTick(() => {
    var myChart = echarts.init(biao3.value);
    let option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      // 上面开关
      // legend: {
      //   data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      // },
      // 下载Echarts图片
      // toolbox: {
      //   feature: {
      //     saveAsImage: {},
      //   },
      // },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["11-25", "11-26", "11-27", "11-28", "11-29", "11-30", "12-01"],
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            formatter: "{value}", // 格式化显示
          },
          splitNumber: 8, // 控制 Y 轴刻度的分割数量
          interval: 50, // 设置 Y 轴刻度的间隔
        },
      ],
      series: [
        {
          name: "Search Engine",
          type: "line",
          stack: "Total",
          smooth: true,
          symbol: "emptyCircle", // 空心圆
          symbolSize: 8, // 自定义点大小
          itemStyle: {
            color: "#3dd4a7", // 点的填充颜色
            borderColor: "#ff0000", // 边框颜色
          },
          label: {
            show: true,
            position: "bottom",
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#a6ecd7",
              },
              {
                offset: 1,
                color: "#e8faf4",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          lineStyle: {
            color: "#3dd4a7", // 设置线的颜色
            width: 3, // 设置线的宽度（粗细）
            type: "solid", // 设置线的样式（可选 'solid', 'dashed', 'dotted'）
          },
          data: [100, 150, 180, 220, 160, 220, 160],
        },
      ],
    };
    myChart.setOption(option); // 设置图表配置项
  });
});
</script>
<style scoped lang="scss">
.biao3 {
  width: 100%;
  height: 100%;
  //   background-color: paleturquoise;
}
</style>
